<template>
  <div class="app-container">
    <!-- ECharts 图表示例 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <scm-bar title="产品数量统计（年）" :xAxisData="years" :seriesData="dataOfYears" height="400px"/>
        </el-card >
      </el-col>
      <el-col :span="12">
        <el-card>
          <scm-bar title="产品数量统计（月）" :xAxisData="months" :seriesData="dataOfMonths" height="400px"/>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup >
import ScmBar from "@/views/scm/dashboard/scmBar.vue";

import { listScmStatsYearly } from "@/api/scm/scmStatsYearly";
import {listScmStatsMonthly} from "@/api/scm/scmStatsMonthly.js";

const { proxy } = getCurrentInstance();

const scmStatsYearlyList = ref([]);
const scmStatsMonthlyList = ref([]);
const loading = ref(true);
let years = ref([]);
let dataOfYears = ref([]);
let months = ref([]);
let dataOfMonths = ref([]);

const now = new Date();
const data = reactive({
  queryParamsForYearly: {
    pageNum: 1,
    pageSize: 11,
    year: now.getFullYear() - 10,
    quarter: 0
  },
  queryParamsForMonthly: {
    pageNum: 1,
    pageSize: 24,
    year: now.getFullYear() - 1,
    month: null
  }

});

const { queryParamsForYearly, queryParamsForMonthly } = toRefs(data);

/** 查询年度统计信息-总列表 */
function getList() {
  // loading.value = true;new Date().getFullYear()
  // queryParams.value.year = new Date().getFullYear();
  listScmStatsYearly(queryParamsForYearly.value).then(response => {
    scmStatsYearlyList.value = response.rows;
    years.value = scmStatsYearlyList.value.map(item => item.year);
    dataOfYears.value = scmStatsYearlyList.value.map(item => item.totalProducts);
  });
  listScmStatsMonthly(queryParamsForMonthly.value).then(response => {
    scmStatsMonthlyList.value = response.rows;
    const total = response.total;
    const removeNumber = total - 13;
    months.value = scmStatsMonthlyList.value.map(item => item.month);
    dataOfMonths.value = scmStatsMonthlyList.value.map(item => item.totalProducts);
    months.value.splice(0, removeNumber);
    dataOfMonths.value.splice(0, removeNumber);
  });

}

getList();



</script>

<style scoped>

</style>